<template>
  <div id="cluereport">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <!-- <el-breadcrumb-item>人才建设</el-breadcrumb-item> -->
      <el-breadcrumb-item :to="{ path: '/youngCadres/yearlist' }">优秀年轻干部</el-breadcrumb-item>
      <el-breadcrumb-item :to="handleClick($route.params.theYear)">{{ $route.params.theYear + '年' }}</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxd" :style="'height:'+tableHeight+'px'">
      <webData :theYear="theYear" :url="dataUrl" :para="dataPara" :timestamp="timestamp" toolbar></webData>
    </section>
  </div>
</template>

<script>
import webData from '../components/webData'
export default {
  components: {
    webData
  },
  data () {
    return {
      dataUrl: this.$http.defaults.youngAPI + `api/busFormalPerson/queryAll`,
      dataPara: {},
      sscsArr: [],
      canedit: false,
      tableHeight: 100,
      timestamp: '',
      theYear: this.$route.params.theYear
    }
  },
  methods: {
    inRoles (str) {
      let arr = this.userRoles
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    inRoless (str) {
      let arr = JSON.parse(localStorage.getItem('Roles'))
      if (arr.indexOf(str) === -1) {
        return false
      } else {
        return true
      }
    },
    handleClick (theYear) {
      let thePath = '/youngCadres/deptlist'
      if (this.inRoless('ROLE_admin') || this.inRoless('ROLE_sizhang') || this.inRoless('ROLE_fusizhang') || this.inRoless('ROLE_youngadmin')) {
        thePath = '/youngCadres/personlist'
      }
      return {
        path: thePath,
        query: {
          theYear
        }
      }
    },
    checkyoungCadresRole () {
      if (this.inRoles('ROLE_other')) {
        this.$router.push({name: 'youngCadresDept'})
      } else if (this.inRoles('ROLE_sizhang') || this.inRoles('ROLE_youngadmin')) {
        this.canedit = true
        this.sscsArr = null
      } else if (this.inRoles('ROLE_admin')) {
        this.canedit = false
        this.sscsArr = null
      } else if (this.inRoles('ROLE_fusizhang')) {
        this.canedit = true
        this.$http
          .get(this.$http.defaults.youngAPI + `api/young/security/getCurrentManageDep`)
          .then(response => {
            if (response.data.success) {
              if (response.data.result && response.data.result.length > 0) {
                this.sscsArr = response.data.result
              }
            } else {
              this.$message({
                message: '获取失败:' + response.data.message,
                type: 'error'
              })
            }
          })
          .catch(error => {
            if (error.status === 500) {
              this.$message({
                message: '网络获取失败:' + error,
                type: 'error'
              })
            }
          })
      } else if (this.inRoles('ROLE_banshirenyuan')) {
        this.canedit = false
        // this.$router.push({name: 'youngCadresDeptList'})
      } else if (this.inRoles('ROLE_chuzhang')) {
        this.canedit = true
        switch (localStorage.getItem('unitName')) {
          case '干部一处':
            this.sscsArr = [1]
            break
          case '干部二处':
            this.sscsArr = [2]
            break
          case '干部三处':
            this.sscsArr = [3]
            break
        }
      }
    },
    showWebData () {
      this.dataPara = {
        zt: 0,
        sscs: this.sscsArr
      }
      this.timestamp = new Date().getTime()
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      let myheight = 146
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - myheight
      })
    }
  },
  mounted () {
    this.userRoles = localStorage.getItem('Roles')
    this.checkyoungCadresRole()
    this.tableresize(this)
    window.onresize = () => {
      this.tableresize(this)
    }
  }
}
</script>
<style>
#cluereport .el-drawer__wrapper{
  width: 100%;
  height: 100%;
  position: fixed !important;
  overflow: hidden;
}
  .wboxd .el-table th{
    font-weight: normal;
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  }
  .wboxd .el-table td, .el-table th{
    padding:0;
    font-size:var(--size14) !important;
    line-height: 20px;
    font-family: '宋体'
  }
  .tableth{
    background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
    height:33px;
  }
  #testlist .wboxs{
    height:45px;
    padding-top:10px;
  }
  #cluereport .el-table td{
    border-right: 1px solid #95B8E7;
    border-bottom: 1px solid #95B8E7;
  }
</style>
<style scoped>
  #cluereport .el-button{
    color:#fff !important;
  }
  #cluereport h1{
    font-size:var(--size16) !important;
    font-weight: bolder;
    height: 30px;
    border-bottom: 1px solid #95B8E7;
    font-family: '宋体';
    line-height: 30px;
    color: #000;
    padding-left:10px;
    background-image: linear-gradient(to bottom , #EEF4FF, #E0ECFF);
    margin:0;
  }
  .el-pagination{
    float: left;
    padding:7px 10px;
  }
  #cluereport .wboxs{
    width: 100%;
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
    padding:0;
  }
  .wboxd{
    padding:0;
    width: calc(100% - 0px);
    background: #fff;
    border: 1px solid #95B8E7;
    margin:0 10px;
    overflow: hidden;
  }
</style>
